<template>
	<div id="app">
		<h3>	<img src="../static/img/logos.png"/>文章列表</h3>
		<ul>
			<li v-for="info in infos">
				<span>{{info.id}}.</span><router-link :to="{name:'info',params:{id:info.id}}"><span>{{info.title}}</span></router-link>
			</li>

		</ul>
	</div>
</template>

<script type="text/javascript">
	export default {
		name: 'List',
		data() {
			return {
				infos: []
			}
		},
		mounted() {
			this.$axios
				.get('http://jsonplaceholder.typicode.com/posts')
				.then(response => (this.infos = response.data.slice(0, 10)))
				.catch(function(error) { // 请求失败处理
					console.log(error);
				});
		}
	}
</script>
<style>
	li {
		font-size: 16px;
		border-bottom: dashed 1px gray;
		margin-bottom: 10px;
	}
</style>